/* input{box-sizing:border-box}  */
h1{
  font-family: 'Montserrat', sans-serif;
  font-weight: lighter;
}
h2{
  font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 200%;
}
h3{
  font-family: 'Montserrat', sans-serif;
  font-weight: 300; 
  font-size: small;

}
a{
  font-family: 'Montserrat', sans-serif;
  font-weight: 200; 
  font-size: small;
  color: white;

}
td{
      font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: medium;
  
}
th{
  font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: medium;

}
body{
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* table, th, td {
  border: 1px solid;
} */

form{
  justify-content: space-evenly;
 display: flex;
 flex-direction: column;
 /* background-color: chartreuse; */
}
a{
  text-decoration: none;
}
select{
  width: 15%;
  margin-top: 2%;
  margin-bottom: 2%;
}
  /* Login form */
  .login-form {
    width: 28%;
    height: 65vh;
    /* margin: 0 auto; */
    padding: 20px;
    border: 1px solid #ddd;
    margin-top: 3%;
  }
  .signup-form {
    /* width: 100%; */
    height: 35vh;
    /* margin: 0 auto; */
    padding: 20px;
    border: 1px solid #ddd;
    margin-top: 5%;

  }

  /* Input fields */
  .login-form input[type="text"],
  .login-form input[type="password"] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }

  /* Submit button */
  .login-form input[type="submit"] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
  }

  /* Add hover effect for buttons */
  .login-form input[type="submit"]:hover {
    background-color: #45a049;
  }
 a:hover {
    background-color: rgb(218, 218, 218);
    color: rgb(0, 0, 0);
  }

/* /////////NAV BAR /////////////////////////////////////*/
  /* Navigation bar */
  header{
    width: 100%;
  }
  .navbar {
    width: 100%;
    background-color: #333;
    overflow: auto;
    width: 100%;
  }

  /* Navigation links */
  .navbar a {
    float: left;
    padding: 12px;
    color: white;
    text-decoration: none;
    font-size: 18px;
  }

  /* Add a hover effect for navbar links */

   td:hover {
    background-color: rgb(36, 202, 243);
    color: rgb(0, 0, 0);
  }


  /* Responsive design - make the navbar links appear on top of each other instead of next to each other on small screens */
  @media screen and (max-width: 500px) {
    .navbar a {
      float: none;
      display: block;
    }
  }
  .Disponible {
    background-color: #96d496;
  }
  .event{
    background-color: rgb(106, 122, 151);
  }
  .closed{
    background-color: rgb(226, 123, 123);
  }


table {
  border-collapse: collapse;
  width: 90%;
  margin-top: 2%;

}

th, td {
  border: 1px solid #ccc;
  /* padding: 8px; */
  text-align: center;
  
}


th {
  background-color: #ddd;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
  
}
tr{
 height: 55px;
}
.message{
  /* position: absolute; */
  font-family: 'Montserrat', sans-serif;
color: rgb(1, 109, 151);
font-size: larger;
}
.error{
  position: absolute;
  font-family: 'Montserrat', sans-serif;
color: red;
/* margin-left: 62%; */
/* margin-top: 8%; */
/* background-color: blue; */
/* width: 25%; */
}
.hours{
position: absolute;
left: 2%;
padding: 2px; 
background-color: transparent;
border: none;

}
.details{
  width: 35%;
  height: 25%;
  background: linear-gradient(to bottom, #f8f9fa, #fff);
  padding: 2em;
  border: 1px solid #ccc;
  border-radius: 35px;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
  margin-top: 5%;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;

}
/* ////////////////////////////////////////////header/////////////////////////////////////////////////// */

footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
  width: 100%;
  height: 1%;
}